<template>
	<div class="cnxh">
		<h3>
			<span class="iconfont">&#xe699;</span>
			<label>猜你喜欢</label>
		</h3>
		<ul class="like-list ">
			<li class="list-item " v-for="(item,index) in hotList" :key="index">
				<div class="left">
					<img :src="item.hotURL" />
				</div>
				
				<div class="right">
					<h5>{{item.hotTil}}</h5>
					<p class="msg">
						<span class="iconfont">&#xe812;&#xe812;&#xe812;&#xe812;&#xe812;</span>
						<label>{{item.msg}}条评论</label>
					</p>
					<aside>
						<span>￥<i>{{item.price}}</i></span>起
						<label>{{item.adret}}</label>
					</aside>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
	import Swiper from 'swiper';
	export default {
		props:['hotList'],
		data() {
			return {
	// 			hotList: [
	
	// 				{
	// 					hotURL: require('@/assets/img/hot01.jpg'),
	// 					hotTil: '长隆野生动物世界',
	// 					price: '250',
	// 					adret:'广州长隆',
	// 					msg:'155609'
	// 				},
	// 				{
	// 					hotURL: require('@/assets/img/hot02.jpg'),
	// 					hotTil: '长隆欢乐世界',
	// 					price: '210.9',
	// 					adret:'广州长隆',
	// 					msg:'83133'
	// 				},
	// 				{
	// 					hotURL: require('@/assets/img/hot03.jpg'),
	// 					hotTil: '广州塔',
	// 					price: '125',
	// 					adret:'珠海区',
	// 					msg:'47241'
	// 				},
	// 				{
	// 					hotURL: require('@/assets/img/hot04.jpg'),
	// 					hotTil: '海珠国家湿地2公园',
	// 					price: '19',
	// 					adret:'珠海区',
	// 					msg:'2951'
	// 				},
	// 				{
	// 					hotURL: require('@/assets/img/hot05.jpg'),
	// 					hotTil: '长隆国际大马戏剧院',
	// 					price: '297.6',
	// 					adret:'广州长隆',
	// 					msg:'47241',
	// 				},
	// 				{
	// 					hotURL: require('@/assets/img/hot06.jpg'),
	// 					hotTil: '珠江夜游',
	// 					price: '68',
	// 					adret:'天河区',
	// 					msg:'21789'
	// 				},
	// 				{
	// 					hotURL: require('@/assets/img/hot07.jpg'),
	// 					hotTil: '天适樱花游乐园',
	// 					price: '250',
	// 					adret:'南沙区',
	// 					msg:'36'
	// 				},
	// 				{
	// 					hotURL: require('@/assets/img/hot08.jpg'),
	// 					hotTil: '广州长隆旅游度假区',
	// 					price: '84.3',
	// 					adret:'广州长隆',
	// 					msg:'66356'
	// 				},
	// 				{
	// 					hotURL: require('@/assets/img/hot09.jpg'),
	// 					hotTil: '广州融雪世界',
	// 					price: '104',
	// 					adret:'广州融创',
	// 					msg:'7590'
	// 				},
	// 				{
	// 					hotURL: require('@/assets/img/hot10.jpg'),
	// 					hotTil: '广州正佳极地海洋世界',
	// 					price: '115',
	// 					adret:'天河区',
	// 					msg:'17694'
	// 				},
	// 			]
			}
		},
		mounted() {
			new Swiper ('.header-cnxh',{
				//循环滑动
				loop:true,
				observer:true,
				observeParent:true
			})
		}
	}
</script>

<style scoped>
.cnxh{
	width: 100%;
	background-color: white;
	font-size: 0.28rem;
}
/* 标题样式 */
.cnxh h3{
	padding: 0.2rem 0;
	margin-left: 0.2rem;
}
.cnxh h3 .iconfont{
	color: red;
}
.cnxh h3 label{
	font-weight:bold;
}
/*列表样式*/
.list-item{
	width: 100%;
	overflow: hidden;
	border-bottom:1px solid #CCCCCC;
}
.left, .right{
	float: left;
}
.left{
	width: 2rem;
	height: 2rem;
	margin: 0.2rem;
}
.left img{
	width: 100%;
	height: 100%;
}
.right{
	margin-top:0.2rem;
	margin-left: 0.2rem;
	width:65%;
}
.right h5{
	font-size:0.36rem;
}
.right .msg{
	margin:0.4rem 0;
}
.right .msg .iconfont{
	color:yellow;
	margin-right:0.1rem;
}
.right aside span{
	color:orangered;
}
.right aside span i{
	font-size: 0.36rem;
	font-style:normal;
}
.right aside label{
	float: right;
	margin: 0.2rem ;
}
</style>
